<template>
	<view class="page must_know" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="title"></c-nav-bar>
		<u-swiper :list="list" @change="(e) => (currentNum = e.current)" :autoplay="false" indicatorStyle="right: 20px"
			height="422rpx" style="margin-bottom: 30rpx">
		</u-swiper>
		<view class="basicInfo" v-if="objList">
			<view class="" style="border-bottom: 1rpx solid #efefef">
				<view class="name">{{ objList.comboName }} </view>
				<view class="num" v-if="objList.comboType == 2">
					<text style="
              width: 180rpx;
              font-size: 40rpx;
              color: #ff3e3e;
              font-weight: bold;
            ">
						<text style="font-size: 24rpx; font-weight: Regular; color: #ff3e3e">￥</text>
						{{ objList.price }}
					</text>
					<u-number-box v-model="checkInRooms" min="0" @overlimit="valChange" @change="valChange">
						<view slot="minus" class="minus">
							<image src="https://i.ringzle.com/file/20240418/e8e77fead6f1470c9cea00291d1e4dab.png"
								mode=""></image>
						</view>
						<text slot="input" class="input">{{ checkInRooms }}</text>
						<view slot="plus" class="plus">
							<image src="https://i.ringzle.com/file/20240418/09449e9f30dd4d8bb49789253a26a018.png"
								mode=""></image>
						</view>
					</u-number-box>
				</view>

				<view class="" style="margin: 30rpx 0">
					<text style="font-size: 26rpx">
						营业时间：{{ businessTime0 }}-{{ businessTime1 }}</text>
				</view>
			</view>
			<!-- 超值优惠 -->
			<view class="book">
				<view class="tit">预约详情</view>

				<view class="from">
					<view class="num" v-if="objList.comboType == 1">
						<text style="
                width: 180rpx;
                font-size: 28rpx;
                color: #111111;
                font-weight: Regular;
              ">
							成人就餐人数
						</text>
						<u-number-box v-model="num" min="0" @overlimit="valChangenum" @change="valChangenum">
							<view slot="minus" class="minus">
								<image src="https://i.ringzle.com/file/20240418/e8e77fead6f1470c9cea00291d1e4dab.png"
									mode=""></image>
							</view>
							<text slot="input" class="input">{{ num }}</text>
							<view slot="plus" class="plus">
								<image src="https://i.ringzle.com/file/20240418/09449e9f30dd4d8bb49789253a26a018.png"
									mode=""></image>
							</view>
						</u-number-box>
					</view>

					<view class="num" v-if="objList.comboType == 1">
						<text style="
                width: 180rpx;
                font-size: 28rpx;
                color: #111111;
                font-weight: Regular;
              ">
							儿童就餐人数
						</text>
						<u-number-box v-model="repastNum" min="0" @overlimit="valChangerepastNum"
							@change="valChangerepastNum">
							<view slot="minus" class="minus">
								<image src="https://i.ringzle.com/file/20240418/e8e77fead6f1470c9cea00291d1e4dab.png"
									mode=""></image>
							</view>
							<text slot="input" class="input">{{ repastNum }}</text>
							<view slot="plus" class="plus">
								<image src="https://i.ringzle.com/file/20240418/09449e9f30dd4d8bb49789253a26a018.png"
									mode=""></image>
							</view>
						</u-number-box>
					</view>

					<view class="item">
						<!-- <view><text class="req">*</text>预约人姓名</view> -->
						<view><text class="req">*</text>预约人姓名</view>
						<view>
							<input type="text" class="u-ipt" placeholder="请输入姓名" v-model="fromData.guestName" />
						</view>
					</view>
					<view class="item">
						<!-- <view><text class="req">*</text>预约手机号</view> -->
						<view><text class="req">*</text>预约手机号</view>
						<view>
							<input type="text" class="u-ipt" placeholder="请输入手机号码" v-model="fromData.guestPhone" />
						</view>
					</view>
					<view class="item" @click="show = true">
						<view><text class="req">*</text>预约日期</view>
						<view>
							<input type="text" disabled class="u-ipt" placeholder="请选择预约日期" v-model="date" />
						</view>
						<view class="" style="margin-top: 32rpx">
							<u-icon name="arrow-right" color="#AAAAAA" size="28"></u-icon>
						</view>
					</view>
					<view class="item" @click="showTwo = true">
						<view><text class="req">*</text>预约时间</view>
						<view>
							<input type="text" disabled class="u-ipt" placeholder="请选择预约时间" v-model="time" />
						</view>
						<view class="" style="margin-top: 32rpx">
							<u-icon name="arrow-right" color="#AAAAAA" size="28"></u-icon>
						</view>
					</view>

					<!-- 
					<view class="item" v-if="objList.comboType==1">
						<view>就餐人数</view>
						<view>
							<input type="text" class="u-ipt" placeholder="请输入就餐人数" v-model="fromData.repastNum">
						</view>
					</view> -->

					<view class="item">
						<view>备注</view>
						<view>
							<input type="text" class="u-ipt" placeholder="请输入备注" v-model="fromData.remarks" />
						</view>
					</view>

					<view class="item">
						<view style="color: #666666">预定</view>
						<view style="font-size: 30rpx; color: #007a69; font-weight: Bold">
							该套餐需提前{{ advanceBookTime }}个小时预订
						</view>
					</view>
					<view class="item">
						<view style="color: #666666">套餐说明</view>
						<view style="font-size: 26rpx; color: #111111; font-weight: Regular">
							{{ objList.comboExplain }}
						</view>
					</view>
				</view>
			</view>

			<view class="" style="padding-bottom: 160rpx">
				<view class="" v-for="(e, i) in cardLists" :key="i">
					<image :src="e" mode="aspectFill" style="width: 100%"></image>
				</view>
			</view>
		</view>

		<view class="pot-btn">
			<view class="left">
				<view style="margin: 4rpx 40rpx;font-size: 24rpx;color: #666666; font-family: Regular;">
					合计
				</view>
				<view style="font-size: 48rpx; color: #ff4141; font-weight: bold">
					￥{{ price == "" ? objList.price : price }}
				</view>
			</view>
			<view class="right" @click="goPay"> 确定订购 </view>
		</view>
		<!-- 支付弹框 -->
		<u-popup :show="payShow" @close="payShow = false">
			<view class="details details_pay">
				<view class="title">
					<text>请选择</text>
					<image class="image" src="@/static/index/steamerTicket/icon_close.png" @tap="payShow = false">
					</image>
				</view>
				<view class="wechat_pay">
					<view class="wp_left">
						<image class="image" src="@/static/index/steamerTicket/img_pay.jpg" mode=""></image>
						<text>微信支付</text>
					</view>
					<image class="image" src="https://i.ringzle.com/file/20240129/9c990626edc245f4bd3a01be7a5fbf01.png"
						mode="">
					</image>
				</view>
				<view class="pay_submit" @tap="toPay">确定</view>
			</view>
		</u-popup>
		<!-- 选择预约时间 -->
		<u-popup :show="showTwo" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="hander">
					<view class="left" @click="showTwo = false"> </view>
					<view class="center"> 选择就餐时间 </view>
					<view class="right" @click="showTwo = false">
						<u-icon name="close" color="#AAAAAA" size="28"></u-icon>
					</view>
				</view>

				<view class="At-last" v-for="(item, index) in JobList" :key="index">
					<view class="itemed" @click="choose(item, index)" :class="indexDb == index ? 'activeItem' : ''">
						{{ item }}
					</view>
				</view>
				<view class="btn" @click="showTwo = false"> 确定 </view>
			</view>
		</u-popup>
		<u-calendar :show="show" @close="close" :maxDate="maxDate" @open="open" :mode="mode"
			@confirm="confirm"></u-calendar>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	const d = new Date();
	const year = d.getFullYear();
	let month = d.getMonth() + 1;
	month = month < 10 ? `0${month}` : month;
	const date = d.getDate();

	export default {
		data() {
			return {
				title: "套餐详情",
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				currentNum: null,
				list: [],
				tickets: [1, 2, 3],
				checkInRooms: 0,
				repastNum: 0,
				num: 0,
				advanceBookTime: 0,
				JobList: [],
				showTwo: false,
				payShow: false,
				indexDb: null,
				price: "",
				fromData: {
					repastTime: "",
					comboType: "",
					guestName: "",
					guestPhone: "",
					homestayId: "",
					openId: "",
					orderAmount: "",
					remarks: "",
					repastId: "",
					num: "",
					repastNum: 0,
				},
				time: "",
				date: "",
				show: false,
				mode: "single",
				objList: '',
				orderId: "",
				cardLists: {},
				lastRepastDate: "2024-04-30",
				// maxDate: `${year}-${month}-${date + lastRepastDate}`,
				maxDate: "",
				businessTime0: "",
				businessTime1: "",
			};
		},

		onLoad(option) {
			this.objList = JSON.parse(option.obj);
			this.list.push(this.objList.cover);
			this.fromData.comboType = this.objList.comboType;
			this.fromData.homestayId = this.objList.homestayId;
			this.fromData.homestayId = this.objList.homestayId;
			this.fromData.openId = JSON.parse(uni.getStorageSync("userInfo")).openId;
			this.fromData.orderAmount = this.objList.price;
			this.fromData.repastId = this.objList.id;

			this.lastRepastDate = this.objList.lastRepastDate
			this.maxDate = this.lastRepastDate;

			var timeWithSeconds = this.objList.businessTimePeriod;
			var timeParts = timeWithSeconds.split("-");
			this.businessTime0 = timeParts[0].slice(0, 5);
			this.businessTime1 = timeParts[1].slice(0, 5);

			this.getRepastTimePeriod();
			this.getRepast();
		},

		methods: {
			// 按人头订单套餐份数
			valChange(e) {
				if (e.value != undefined) {
					this.checkInRooms = e.value;
					this.fromData.num = e.value;
					// this.price =  this.objList.price * e.value;
					this.price = this.accMul(this.objList.price, e.value);
					this.fromData.orderAmount = this.price;
				}
			},
			accMul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {}
				try {
					m += s2.split(".")[1].length;
				} catch (e) {}
				return (
					(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
					Math.pow(10, m)
				);
			},

			// 成人就餐
			valChangenum(e) {
				if (e.value != undefined) {
					this.num = e.value;
					this.fromData.num = e.value;
					// this.price = this.objList.price * e.value
					// this.fromData.orderAmount = this.price
				}
			},

			// 儿童就餐
			valChangerepastNum(e) {
				if (e.value != undefined) {
					this.repastNum = e.value;
					this.fromData.repastNum = e.value;
					// this.price = this.objList.price * e.value
					// this.fromData.orderAmount = this.price
				}
			},
			getRepast() {
				this.$api.get(`/api/repast/${this.fromData.repastId}`).then((res) => {
					this.cardLists = res.data.data.introduction.split(",");
					this.advanceBookTime = res.data.data.advanceBookTime;
				});
			},
			getRepastTimePeriod() {
				this.$api
					.get(
						`/api/repast/getRepastTimePeriod/${this.objList.homestayId}`,
						this.RepastList
					)
					.then((res) => {
						this.JobList = res.data.data;
					});
			},
			// 提交订单
			goPay(comboType) {
				// if (this.objList.comboType == 1) {
				// if (!this.fromData.repastNum) return this.$showToast('请选择就餐人数');
				// }
				if (!this.fromData.num) return this.$showToast("请选择就餐人数");
				if (!this.fromData.guestName) return this.$showToast("请填写预约人姓名");
				if (!this.$reg.mobile(this.fromData.guestPhone))
					return this.$showToast("请填写正确的预约手机号");
				if (!this.date) return this.$showToast("请选择预约日期");
				if (!this.time) return this.$showToast("请选择预约时间");

				this.fromData.repastTime = this.date + "  " + this.time;

				let newData = JSON.parse(JSON.stringify(this.fromData));
				newData.guestName = this.$aesTm.encrypt(newData.guestName);
				newData.guestPhone = this.$aesTm.encrypt(newData.guestPhone);
				this.$api.post("/api/repast/repastOrder", newData).then((res) => {
					if (res.data.code === 0) {
						this.payShow = true;
						this.orderId = res.data.data;
					} else if (res.data.code === 500) {
						this.$showModal(res.data.msg);
					}
				});
			},
			// 确定支付
			toPay() {
				this.lsKey = "toPay";
				this.confrimPay();
			},
			confrimPay() {
				var list = JSON.stringify({
					price: this.fromData.orderAmount,
					orderId: this.orderId,
				});

				this.$api
					.post(
						"/order/icbc/createOrder", {
							orderCode: this.orderId,
							tradeType: "JSAPI",
							openId: JSON.parse(uni.getStorageSync("userInfo")).openId,
						},
						false
					)
					.then((res) => {
						if (res.statusCode == 200 && res.data != null) {
							this.payShow = false;
							this.$wxPay(res.data).then((result) => {
								uni.redirectTo({
									url: "/pagesTrip/hotel/details/paymentSuccess?list=" + list,
								});
							});
						}
					});
			},
			open() {
				this.show = false;
			},
			close() {
				this.show = false;
			},
			confirm(e) {
				this.date = e[0];
				this.show = false;
				this.time = '';
			},
			choose(item, index) {
				// 已有的时间， 当前时间  假设为2022-12-31 10:30
				var existingTime = new Date(this.date + " " + item.slice(6, 12));
				var existingTimePlus3Hours = new Date(
					existingTime.getTime()
				);
				// 创建一个Date对象，表示当前时间
				var currentDate = new Date();

				// 将当前时间加上n小时
				var currentTimePlus3Hours = new Date(
					currentDate.getTime() + this.advanceBookTime * 60 * 60 * 1000
				);

				// 比较两个时间的大小
				if (currentTimePlus3Hours > existingTimePlus3Hours) {
					this.$showToast("已过就餐时间，请重新选择");
					this.indexDb = index;
					// this.time = item
				} else if (currentTimePlus3Hours < existingTimePlus3Hours) {
					this.indexDb = index;
					this.time = item;
				} else {
					console.log("当前时间加上n小时后的时间与已有的时间相等");
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.req {
		color: #f44;
	}

	.details {
		padding: 40rpx 30rpx 200rpx;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.details_pay {
		background: #f6f6f6;

		.wechat_pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 83rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 41rpx 24rpx;

			.wp_left {
				display: flex;
				align-items: center;

				image {
					width: 54rpx;
					height: 54rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-left: 24rpx;
				}
			}

			&>image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.pay_submit {
			position: fixed;
			bottom: 55rpx;
			width: 92%;
			margin-top: 59rpx;
			height: 92rpx;
			background: #007a69;
			border-radius: 46rpx;
			line-height: 92rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			letter-spacing: 2rpx;
		}
	}

	.btn {
		margin: 0 50rpx;
		position: fixed;
		z-index: 2;
		bottom: 30rpx;
		width: 88%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 50rpx;
		background-color: #007a69;
		text-align: center;
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.pop {
		height: 665rpx;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx 0;

		.hander {
			box-sizing: border-box;
			height: 113rpx;
			line-height: 113rpx;
			padding: 0 31rpx;
			display: flex;
			justify-content: space-between;

			.left {
				font-weight: Regular;
				font-size: 32rpx;
				color: #999999;
			}

			.right {
				font-weight: Regular;
				font-size: 32rpx;
				color: #007a69;
				margin-top: 30rpx;
			}

			.center {
				font-weight: Bold;
				font-size: 32rpx;
				color: #1c1e41;
			}
		}

		.middle {
			box-sizing: border-box;
			width: 100%;
			// height: 136rpx;
			border-top: 1rpx solid #efefef;
			border-bottom: 1rpx solid #efefef;
			display: flex;
			// justify-content: space-around;
			text-align: center;

			.left {
				flex: 1;
				// background-color: aqua;

				.left-one {
					margin-top: 36rpx;
					font-weight: Regular;
					font-size: 26rpx;
					color: #88919d;
				}

				.left-two {
					margin-top: 24rpx;
					font-weight: Bold;
					font-size: 32rpx;
					color: #1c1e41;
					margin-bottom: 18rpx;
				}
			}

			.right {
				flex: 1;
				// background-color: antiquewhite;

				.right-one {
					margin-top: 36rpx;
					font-weight: Regular;
					font-size: 26rpx;
					color: #88919d;
				}

				.right-two {
					margin-top: 24rpx;
					font-weight: Bold;
					font-size: 32rpx;
					color: #1c1e41;
					margin-bottom: 18rpx;
				}
			}
		}

		.At-last {
			font-size: 36rpx;
			color: #1c1e41;
			font-weight: Bold;
			text-align: center;
			margin: 0 auto;

			.itemed {
				margin: 15rpx auto;
				height: 80rpx;
				line-height: 80rpx;
				width: 670rpx;
				border-radius: 24rpx;
			}
		}
	}

	.At-last {
		font-size: 36rpx;
		color: #1c1e41;
		font-weight: Bold;
		text-align: center;
		margin: 0 auto;

		.item {
			margin: 0 auto;
			height: 80rpx;
			line-height: 80rpx;
			width: 670rpx;
			border-radius: 24rpx;
		}
	}

	.activeItem {
		background-color: #f5f8fa;
	}

	.u-ipt {
		border: none;
		outline: none;
		// text-align: right;

		&::placeholder {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #aaaaaa;
		}
	}

	.req {
		color: #f44;
	}

	.item {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #efefef;
		padding: 5rpx 0;

		&>view {
			margin: 24rpx 0;

			&:first-child {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 40rpx;
				width: 180rpx;
			}

			&:nth-child(2) {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: Regular;
				color: #111111;
				line-height: 42rpx;
				width: calc(100% - 216rpx);

				input {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					// font-weight: 400;
					color: #111111;
					font-weight: Regular;
					outline: none;
					border: none;
					width: 100%;

					&::placeholder {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: Regular !important;
						color: #aaaaaa;
						line-height: 37rpx;
					}
				}
			}

			&:nth-child(3) {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.book {
		margin-top: 30rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
		// background-color: #fff;
		// margin: 20rpx 0;
		// padding: 40rpx 24rpx 47rpx;

		.tit {
			font-size: 36rpx;
			color: #111;
			margin-bottom: 32rpx;
			font-weight: 600;

			text {
				font-size: 24rpx;
				color: #999;
				margin-left: 20rpx;
			}
		}
	}

	.num {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #f0f2f5;

		.input {
			margin: 0 30rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}

		text {
			margin: 20rpx 0;

			&:nth-child(1) {
				font-size: 28rpx;
				color: #111;
				font-weight: 400;
			}

			&:nth-child(3) {
				font-size: 36rpx;
				color: #ff4141;
				margin-right: 40rpx;
			}

			&.icon {
				display: inline-block;
				width: 100rpx;
				flex: 1;
				text-align: right;
				padding-top: 12rpx;
			}
		}
	}

	.minus,
	.plus {
		border-radius: 6rpx;
		// text-align: center;
		width: 44rpx;
		height: 44rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.currentNum {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		@include flex;
		justify-content: center;
		color: #ffffff;
	}

	.basicInfo {
		padding: 40rpx 24rpx 20rpx;
		border-radius: 24rpx 24rpx 0 0;
		background-color: #fff;

		.name {
			font-size: 40rpx;
			color: #1c1e41;
			font-weight: Bold;
		}

		.time {
			display: flex;
			justify-content: space-between;
			margin: 10rpx 0;

			.left {}

			.right {
				display: flex;
			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
	}

	.pot-btn {
		z-index: 999;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		box-sizing: border-box;
		height: 120rpx;
		align-items: center;
		text-align: center;
		background-color: #fff;
		justify-content: space-between;
		padding: 16rpx;

		.left {
			text-align: center;
			display: flex;
			align-items: center;
		}

		.right {
			width: 220rpx;
			height: 88rpx;
			line-height: 88rpx;
			/* 自定义线性渐变，从左上到右下，同时包含多个颜色 */
			// background: linear-gradient(to right, #0EBFFE, #00D3E8);
			background-color: #007a69;
			font-size: 31rpx;
			color: #ffffff;
			text-align: center;
			border-radius: 50rpx;
		}
	}
</style>